import { Authenticator, ThemeProvider } from '@aws-amplify/ui-react';
import { AuthStyle } from './AuthStyle';

import { Example } from '@/components/Example';
import { Fragment } from '@/components/Fragment';

## Styling

You can customize the Authenticator's default style by using [CSS variables](../../theming/css-variables).

### CSS style

The example below uses a `<style>` tag to change the default colors to a dark theme:

```css
[data-amplify-authenticator] {
  --amplify-colors-background-primary: var(--amplify-colors-neutral-90);
  --amplify-colors-background-secondary: var(--amplify-colors-neutral-100);
  --amplify-colors-brand-primary-10: var(--amplify-colors-teal-100);
  --amplify-colors-brand-primary-80: var(--amplify-colors-teal-40);
  --amplify-colors-brand-primary-90: var(--amplify-colors-teal-20);
  --amplify-colors-brand-primary-100: var(--amplify-colors-teal-10);
  --amplify-colors-font-interactive: var(--amplify-colors-white);
  --amplify-components-tabs-item-active-color: var(--amplify-colors-white);
  --amplify-components-tabs-item-focus-color: var(--amplify-colors-white);
  --amplify-components-tabs-item-hover-color: var(--amplify-colors-orange);
}
```

<Example>
<AuthStyle />

</Example>

<Fragment platforms={['react']}>
  {({ platform }) => import(`./customization.styling.${platform}.mdx`)}
</Fragment>

## Additional CSS Styling

You can also override the authenticator's `amplify-*` classes.

For example, if you'd like to hide the sign up tab, you can override the `amplify-tabs` class.

```css
.amplify-tabs {
  display: none;
}
```

<Example>
  <style>{`
    .customization-hide-sign-up .amplify-tabs {
      display: none;
    }
  `}</style>
  <Authenticator className="customization-hide-sign-up" />
</Example>

If you'd like to update the primary color of your submit button you can override the `amplify-button` class.

```css
.amplify-button[data-variation='primary'] {
  background: linear-gradient(
    to right,
    var(--amplify-colors-green-80),
    var(--amplify-colors-orange-40)
  );
}
```

<Example>
  <style>{`
    .customization-button .amplify-button[data-variation="primary"] {
      background:linear-gradient(to right, var(--amplify-colors-green-80),var(--amplify-colors-orange-40) );
    }
  `}</style>
  <Authenticator className="customization-button" />
</Example>